@extends('layouts.console_main')
@section('resources')
    @parent
    <style type="text/css">
        #container{ width:90%; height: 500px;}
        tfoot{background:lightblue;}
    </style>
@endsection
@section('content')
    <!-- page content -->
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title">
                <div class="title_left">
                    <h2>数据管理  >>  肿瘤医院 >> 水平衡分析 </h2>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>搜索</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <br />
                            <form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left" method="">
                                <div class="form-group">
                                    <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">名称 <span class="required">*</span></label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select id="heard" class="form-control col-md-6 col-sm-6 col-xs-12" name="number" required>
                                            <option value="0">---请选择---</option>
                                        @foreach($father_node_list as $list)
                                            <option value="{{$list['number']}}">{{$list['name']}}</option>
                                        @endforeach
                                        </select>
                                    </div>
                                    <br/><br/> <br/>
                                    <div class="clearfix"></div>
                                    <div class="form-group">
                                        <label class="control-label col-md-1 col-sm-3 col-xs-12" for="last-name">时间 <span class="required">*</span></label>
                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                            <input type="date" id="date" name="date" required="required" class="form-control col-md-7 col-xs-12">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-3 col-sm-3 col-xs-12 col-md-offset-1">
                                    <button type="button" class="btn btn-primary"  id="submit" > 搜索</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>该水表在 <span id="show_date_1" style="color: red;">{{date('Y-m-d')}}</span> 使用情况</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="table-responsive">
                                <table id="datatable" class="table table-striped table-bordered">
                                    <tr>
                                        <td>编号</td>
                                        <td>名称</td>
                                        <td>企业名称</td>
                                        <td>使用量</td>
                                    </tr>
                                    <tr>
                                        <td id="father_number"></td>
                                        <td id="father_name"></td>
                                        <td id="father_enterprise_number"></td>
                                        <td id="father_consumption"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>

                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>子节点在 <span id="show_date_2" style="color: red;">{{date('Y-m-d')}}</span> 用水情况</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="table-responsive">
                                <table id="datatable" class="table table-striped table-bordered">
                                    <thead>
                                    <tr>
                                        <td>编号</td>
                                        <td>名称</td>
                                        <td>使用量</td>
                                        <td>状态</td>
                                    </tr>
                                    </thead>
                                    <tbody id="child_tbody">

                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td>编号</td>
                                        <td>名称</td>
                                        <td>使用量</td>
                                        <td>状态</td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>

                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>水平衡在 <span id="show_date_3" style="color: red;">{{date('Y-m-d')}}</span> 分析结论</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="table-responsive">
                                <table id="analyze_table"  hidden class="table table-striped table-bordered">
                                    <tr>
                                        <td>父节点使用量</td>
                                        <td class="balance_father_consumption"></td>
                                        <td>子节点总使用量</td>
                                        <td class="balance_child_consumption"></td>
                                    </tr>
                                    <tr>
                                        <td>子节点总数量</td>
                                        <td class="balance_child_number_total">有效数量</td>
                                        <td>有效数量</td>
                                        <td class="balance_child_valid_number"></td>
                                    </tr>
                                    <tr id="balance_child_number">
                                        <td>无效数量</td>
                                        <td class="balance_child_invalid_number"></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>损益</td>
                                        <td class="balance_loss_rate" style='color: red;'></td>
                                        <td ><a id="get_no_balance_result" style="color:red;">不平衡可能原因</a></td>
                                        <td></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>

                <div class="col-md-12 col-sm-12 col-xs-12" hidden id="not_balance_reason">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>不平衡可能的原因</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="table-responsive">
                                <table id="not_balance_reason_table"  class="table table-striped table-bordered">

                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>

                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>地图</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>

                        <div class="x_content">
                            <div class="table-responsive">
                                <div id="container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /page content -->
@endsection
@section('scriptResources')
    @parent
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=a9fe1b184bacd00ecd70365903024419&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script>
        var longitude = 115.953115;
        var latitude = 28.674775;
        var consumption = 12;
        var lntlatXY = [longitude, latitude];
        var name = '肿瘤医院';
        var number = 'ch00';
        var map = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 13
        });
        marker = new AMap.Marker({  //加点
            map: map,
            position: lntlatXY,
            icon:new AMap.Icon({
                size: new AMap.Size(40, 50),  //图标大小
                image: "http://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
                imageOffset: new AMap.Pixel(0, -60)
            }),
            title:name
        });
        map.setFitView();
        function geocoder_CallBack(data) {
            var address = data.regeocode.formattedAddress; //返回地址描述
            document.getElementById("result").innerHTML = address;
        }
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function(e) {
            marker.setMap(null);
            lnglatXY=[e.lnglat.getLng(),e.lnglat.getLat()]
            // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
            //console.log(e.lnglat.getLng());
            marker = new AMap.Marker({  //加点
                map: map,
                position: lnglatXY
            });
            map.setFitView();
            $("input[name='longitude']").val(e.lnglat.getLng());
            $("input[name='latitude']").val(e.lnglat.getLat());
        });
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
        }
        //
        $("#submit").click(function() {
            var number = $("select[name='number']").find("option:selected").val();
            var my_date = $("input[name='date']").val();
            $.ajax({
                url : '/data/balance/analyze',
                data: {
                    number:number,
                    date:my_date
                },
                type:'get',
                dataType:'json',
                success:function(data){
                    if(data.status == 'success') {
                        var data = data.data;
                        $("#show_date_1").html(data.date);
                        $("#show_date_2").html(data.date);
                        $("#show_date_3").html(data.date);
                        //父节点数据
                        $("#father_number").html(data.basic_info.number);
                        $("#father_name").html(data.basic_info.name);
                        $("#father_enterprise_number").html(data.basic_info.enterprise_name);
                        $("#father_consumption").html(data.father_consumption);
                        //子节点数据
                        var child_lists =data.child_lists;
                        var child_html = '';
                        for(var i=0; i<child_lists.length; i++ ) {
                            if(child_lists[i]['use_status'] == 0) {
                                child_html += "<tr>" +
                                                "<td>" + child_lists[i]['number'] + "</td>" +
                                                "<td>" + child_lists[i]['name'] + "</td>" +
                                                "<td>" + child_lists[i]['consumption'] + "</td>" +
                                                "<td style='color: red;'>无数据</td>" +
                                            "</tr>";
                            } else {
                                child_html += "<tr>" +
                                    "<td>" + child_lists[i]['number'] + "</td>" +
                                    "<td>" + child_lists[i]['name'] + "</td>" +
                                    "<td>" + child_lists[i]['consumption'] + "</td>" +
                                    "<td>有效</td>" +
                                    "</tr>";
                            }
                            //地图
                            var market_content = '<div><a target="_blank" href="/water/statistic/get?id=' + child_lists[i]['id'] + '" class="color:red;"><img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png"></a></div>';
                            var market1 = new AMap.Marker({  //加点
                                map: map,
                                position: [child_lists[i]['longitude'], child_lists[i]['latitude']],
                                title: child_lists[i]['number'] + ":"  + child_lists[i]['consumption'] + "吨",
                                content: market_content,
                            });
                        }
                        $("#child_tbody").html(child_html);
                        //水平衡结论
                        $('#analyze_table').show();
                        $(".balance_father_consumption").html(data.father_consumption);
                        $(".balance_child_consumption").html(data.child_total_consumption);
                        $(".balance_child_number_total").html(data.count);
                        $(".balance_child_valid_number").html(data.valid_count);
                        $(".balance_child_invalid_number").html(data.invalid_count);
                        if(data.loss_rate > 5) {
                            $(".balance_loss_rate").html(data.loss_rate + "%(不平衡)");
                        } else {
                            $(".balance_loss_rate").html(data.loss_rate + "%(正常)");
                        }
                    } else {
                        alert(data.message);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {

                }
            });
        })
        $("#get_no_balance_result").click(function () {
            var number = $("select[name='number']").find("option:selected").val();
            var my_date = $("input[name='date']").val();
            $.ajax({
                url: '/data/not_balance/reason',
                data: {
                    number: number,
                    date: my_date
                },
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    if (data.status == 'success') {
                        var data = data.data;
                        var reason_html = "<tr><th>编号</th><th>名称</th><th>当前使用量</th><th>平均值</th><th>超出平均值比例</th><th>最小值</th><th>上周同期使用量</th><th>上上周同期使用量</th></tr>" +
                                          "<tr><td>"+data.father_number+"</td><td>总表</td><td>"+data.father_consumption+"</td><td>"+data.father_avg+"</td><td>"+data.father_rate+"%</td><td>"+data.father_min+"</td><td>"+data.father_last_week_consumption+"<td>"+data.father_two_weeks_ago_consumption+"</td></tr>" ;
                        var child_lists = data.child_lists;
                        for(var i=0; i<child_lists.length;i++) {
                            reason_html += "<tr><td>"+child_lists[i]['number']+"</td><td>"+child_lists[i]['name']+"</td><td>"+ child_lists[i]['consumption'] +"</td><td>"+child_lists[i]['avg']+"</td><td>"
                                +child_lists[i]['rate']+"%</td><td>"+child_lists[i]['min']+"</td><td>"+child_lists[i]['last_week_consumption']+"</td><td>"+child_lists[i]['two_weeks_ago_consumption']+"</td></tr>";
                        }
                        $("#not_balance_reason_table").html(reason_html);
                        $("#not_balance_reason").show();

                    } else {
                        alert(data.message);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {

                }
            });

        });
    </script>
@endsection

